<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天机器人</title>
    <link rel="stylesheet" href="/css/zui.min.css">
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/zui.min.js"></script>
</head>
<body>
<div class="container" >
    <div class="col-md-12" style="text-align: center" >
    <nav class="navbar navbar-default " style="margin-top: 10px" role="navigation">
        <h2>机器人聊天系统</h2>
    </nav>
    </div>
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <h3>聊天框:</h3>
            </div>
            <div class="panel-body" >
                <input type="hidden" id="stepname" value="${stepname}">
                <table id="chattable" class="table table-bordered">
                    <tr>
                        <td>${welcome}</td>
                    </tr>
                </table>
                <form>
                    <div class="form-group col-md-10">
                        <input  class="form-control" id="msg" placeholder="请输入您的消息">
                    </div>
                    <div class="col-md-2">
                        <button  type="button"  id="submitButton" onclick="sendMessage()" class="btn btn-primary">发送消息</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script>

    window.onload=function () { //网页加载完成执行该方法
        $("#submitButton").remove("disabled","disabled")
        $("#msg").remove("disabled","disabled")
    }
    function sendMessage(){
        let chatlist=[]
        let rows=$("#chattable tr")
        let stepname=$("#stepname").val();
        for (let i=0;i<rows.length;i++){
            let chatmsg=$(rows[i]).children()[0].innerText;
            chatlist.push(chatmsg);
        }
        let message=$("#msg").val();
        //提交post请求
        $.post("/chat/msg",
            {
               msg:message,
               chatlist:JSON.stringify(chatlist),
               stepname: stepname
            },
            function (data){
                if(data.code==200){
                    console.log("data.stepname:"+data.stepname)
                    //更新stepname
                    $("#stepname").val(data.stepname)
                    let allTrTd="";
                    let chatArray=data.chatmsg.split(";");
                    for(let i=0;i<chatArray.length;i++){
                        allTrTd+='<tr> <td>'+chatArray[i]+'</td></tr>'
                    }
                    console.log(allTrTd)
                    $("#chattable").empty();//jquery清空表格
                    $("#chattable").append(allTrTd);
                    if(data.refresh=="1"){
                        $("#submitButton").attr("disabled","disabled")
                        $("#msg").attr("disabled","disabled")
                        $("#msg").val("")
                        $("#msg").attr("placeholder", "对话结束,请刷新网页开始一轮新的对话");
                    }
                }


            }
        )
    }
</script>
</html>
